<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑资料右侧</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/cropbox.js"></script>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.css" />
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/front/compile.css" />
<script type="text/javascript">
	$(function() {
		$('#myTab a:last').tab('show'); //初始化显示哪个tab  
		$('#myTab a').click(function(e) {
			e.preventDefault(); //阻止a链接的跳转行为  
			$(this).tab('show'); //显示当前选中的链接及关联的content  
		});
	});
</script>
<script type="text/javascript" src="../js/front/personRight.js"></script>
</head>
<body>
	<div id="" class="mright">
		<div id="" class="r_head">
			<img src="../img/bianji.png" />&nbsp;博客设置
		</div>
		<div id="myTab">

			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">

				<li role="presentation" class="active"><a href="#profile"
					aria-controls="profile" role="tab" data-toggle="tab">基本资料</a></li>
				<li role="presentation"><a href="#toch" aria-controls="toch"
					role="tab" data-toggle="tab">联系方式</a></li>
				<li role="presentation"><a href="#update-tx"
					aria-controls="update-tx" role="tab" data-toggle="tab">修改头像</a></li>
				<li role="presentation"><a href="#update-pas"
					aria-controls="#update-pas" role="tab" data-toggle="tab">修改密码</a></li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">

				<!--
                            	作者：2235819748@qq.com
                            	时间：2018-03-14
                            	描述：基本资料
                            -->
				<div role="tabpanel" class="tab-pane fade in active" id="profile">
					<form class="form-horizontal form-cc" action="compileright"
						method="post">
						<div class="form-group aa">
							<label for="inputEmail3" class="col-sm-2 control-label">账户：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control wt" id="inputEmail3"
									placeholder="${user.userAccount }" readonly>
							</div>
						</div>
						<div class="form-group aa">
							<label for="inputPassword3" class="col-sm-2 control-label  ">昵称：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control wt" id="uname"
									placeholder="${user.name }" name="changeName"
									onfocusout="check('uname')"> <label id="unameLabel"></label>
							</div>
						</div>
						<div class="form-group aa">
							<label for="inputEmail3" class="col-sm-2 control-label">性别：</label>
							<div class="col-sm-10">
								<select class="form-control wt" name="changeSex">

									<c:if test="${user.sex==0 }">
										<option selected="selected">男</option>
										<option>女</option>
									</c:if>
									<c:if test="${user.sex==1 }">
										<option>男</option>
										<option selected="selected">女</option>
									</c:if>
									<%-- <c:if test="${user.sex!=0&&user.sex!=1 }">
										<option selected="selected">男</option>
										<option>女</option>
									</c:if> --%>

								</select>
							</div>
						</div>
						<div class="form-group aa">
							<label for="inputEmail3" class="col-sm-2 control-label">类别：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control wt" id="inputEmail3"
									placeholder=" ${user.userClass }" readonly>
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default sub">保存设置</button>
							</div>
						</div>
						<div class="ts-img">
							<img src="../img/ts.png" />
						</div>
					</form>
				</div>
				<!--
                            	作者：2235819748@qq.com
                            	时间：2018-03-14
                            	描述：联系方式
                            -->
				<div role="tabpanel" class="tab-pane fade " id="toch">
					<form class="form-horizontal form-cc" action="compileright"
						method="post" >
						<div class="form-group ">
							<label for="inputEmail3" class="col-sm-2 control-label">电话：</label>
							<div class="col-sm-10">
								<input type="tel" class="form-control wt" id="phone"
									placeholder="${user.phone }" name="changePhone"
									onfocusout="check('phone')"> <label id="phoneLabel"></label>

							</div>

						</div>

						<div class="form-group ">
							<label for="inputPassword3" class="col-sm-2 control-label  ">QQ：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control wt" id="qqnum"
									placeholder="${user.qq }" name="changeQQ"
									onfocusout="check('qqnum')"> <label id="qqnumLabel"></label>
							</div>


						</div>
						<div class="form-group ">
							<label for="inputPassword3" class="col-sm-2 control-label  ">E-mail：</label>
							<div class="col-sm-10">
								<input type="email" class="form-control wt" id="email"
									placeholder="${user.email }" name="changeEmail"
									onfocusout="check('email')"> <label id="emailLabel"></label>
							</div>

						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default sub">保存设置</button>
							</div>
						</div>
					</form>
				</div>
				<!--
                            	作者：2235819748@qq.com
                            	时间：2018-03-14
                            	描述：修改头像
                            -->
				<div role="tabpanel" class="tab-pane fade " id="update-tx">
					<div class="m-tx ">
						<div class="clearfix smmm ">
							<span class="sm">
								新版头像上传流程完美支持上传高图或宽图，可以设置在“关于我”模块中按原图比例显示头像。 </span> <a href="#"
								class="closea">关闭</a>
						</div>

						<!-- <div class="bj-tx">
							<img src="../img/ava (1).jpg" alt="头像" class="img-thumbnail">
						</div>
						<div class="tx-sm">支持jpg、gif、png格式，图片文件小于5M,大图可选择按原图比例或方图图两种展示效果在“关于我”模块进行设置</div>
						<form action="" action="compileright" method="post"
							enctype="multipart/form-data">
							<div class="form-group">

								<div class="col-sm-offset-2 col-sm-10">
									<input type="file" name="touxiang" class="btn btn-default subb" />
									<button type="submit" class="btn btn-default subb">上传头像</button>
								</div>
							</div>
						</form> -->
		<div class="container">
			<form action="compileright"	method="post" id="touxiangForm">
				<div class="imageBox">
				<div class="thumbBox"></div><label>${label }</label>
				<div class="spinner" style="display: none">Loading...</div>
			</div>
			<div class="action">
				<!-- <input type="file" id="file" style=" width: 200px">-->
				<div class="new-contentarea tc">
					<a href="javascript:void(0)" class="upload-img">
						<label for="upload-file">上传图像</label>
					</a>
					<input type="file" class="" name="upload-file" id="upload-file" />
				</div>
				<input type="hidden" id="touxiang" name="touxiang" value=""  />
				<input type="button" id="sctupian" class="Btnsty_peyton" value="确定">
				<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
			</div>
			<div class="cropped"></div>
			</form>
		</div>
		<script type="text/javascript">
			$(window).load(function() {
				var options = {
					thumbBox: '.thumbBox',
					spinner: '.spinner',
					imgSrc: '../img/touxiang/1.jpg'
				}
				var cropper = $('.imageBox').cropbox(options);
				$('#upload-file').on('change', function() {
					var reader = new FileReader();
					reader.onload = function(e) {
						options.imgSrc = e.target.result;
						cropper = $('.imageBox').cropbox(options);
					}
					reader.readAsDataURL(this.files[0]);
					this.files = [];
				})
				$('#btnCrop').on('click', function() {
					$(".cropped").show();
					var img = cropper.getDataURL();
					$('.cropped').html('');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
					$('.cropped').append('<img src="' + img + '" align="absmiddle" id="xintouxiang"  style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
				})
				$('#sctupian').on('click', function() {
					var value = $("#xintouxiang").attr("src");
					$("#touxiang").val(value);
					$("#touxiangForm").submit();
					
				})
			});
		</script>


					</div>
				</div>
				<!--
                            	作者：2235819748@qq.com
                            	时间：2018-03-14
                            	描述：修改密码
                            -->
				<div role="tabpanel" class="tab-pane fade " id="update-pas">

					<iframe src="xiugaimimaright" width="62%" height="380px">
					</iframe>
				</div>
			</div>

		</div>

	</div>
</body>
</html>